/**
 *@描述：我的知识列表
 *@作者：殷健
 *@创建时间：2022/7/7
 *@最后修改时间：2022/7/7
 */

import {Link} from 'umi';
import {EditOutlined, EyeOutlined, LikeOutlined, MessageOutlined, PlusOutlined, StarOutlined,} from "@ant-design/icons";
import type {PaginationProps} from "antd";
import {Avatar, Button, Card, Divider, Dropdown, Menu, Pagination, Space, Tag,List} from "antd";
import {queryFakeList} from '@/pages/Knowledge/service';
import { getKnowledgeTypesData} from '@/pages/Dashboard/Knowledge/service';
import moment from "moment";
import styles from './index.less';
import {useEffect, useState} from "react";
import {KnowledgeListResponse} from "@/pages/Knowledge/data";
import {getKeywordStr} from '@/utils/func';
import {uniqueId} from "lodash";
import CommonIconFont from "@/components/CommonIconFont";

const KnowledgeList = () => {
    // const pagination: IPaginationConfig = { ...PAGINATION_CONFIG }
    // const [ searchVo,setSearchVo ] = useState<searchVo>({
    //         authorName:"",
    //         praise:"",
    //         isPublic:"",
    //         keyword:"",
    //         applicationArea:""
    // });
    const [total, setTotal] = useState("0");
    const [ loading,setLoading ] = useState(false);
    const [ data,setData ] = useState<any[]>([]);
    const [ pageSize,setPageSize ] = useState("5");
    const [ currentPage,setCurrentPage ] = useState("1");
    const onChange: PaginationProps['onChange'] = page => {
        setCurrentPage(page.toString());
    };

    const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
        setCurrentPage(current.toString());
        setPageSize(pageSize.toString());
        // console.log(current, pageSize);
    };


    const getKnowledgeList = async (
        {
            authorName,
            praise,
            isPublic,
            keyword,
            applicationArea
        }:{
            authorName?:string;
            praise?:string;
            isPublic?:string;
            keyword?:string;
            applicationArea?:string;
        }
    ) => {
        setLoading(true);
        try {
            const res: AircasKB.ResponseType<KnowledgeListResponse> = await queryFakeList({
                currentPage,
                pageSize,
                authorName,
                praise,
                isPublic,
                keyword,
                applicationArea
            })
            if (res.code == 200) {
                // @ts-ignore

                const result: any = [];
                res.data.list?.map((item) => {
                    let onwer: string = "";
                    // @ts-ignore
                    for (let i = 0; i < item.authorNames?.length; i++) {
                        // @ts-ignore
                        onwer += item.authorNames[i] + ',';
                    }
                    // @ts-ignore
                    if (item.authorNames?.length > 0) {
                        onwer += '等' + item.authorNames?.length + "人";
                    }
                    result.push({
                        ...item,
                        onwer,
                        avatar: 'https://joeschmoe.io/api/v1/random'//https://joeschmoe.io/api/v1/random
                    })
                })
                setData(result);
                // @ts-ignore
                setTotal(res.data.total);
            }
            setLoading(false);
        }
        catch(e:any){

        }
    }


    // const { data, loading } = useRequest(() => {
    //     return queryFakeList({
    //         ...pagination,
    //         ...searchVo
    //     });
    // });
    // const list = [];
    const [ items,setItems ] = useState<AircasKB.Knowledge.KnowledgeTypesResponse[]>();
    const getknowledgeTypes  = async () => {
        try{
            const list = await getKnowledgeTypesData();
            setItems(list);
        }
        catch (e) {

        }

    }
    useEffect(()=>{
        getKnowledgeList({});
    },[currentPage,pageSize])

    useEffect(()=>{
        // getKnowledgeList({});
        getknowledgeTypes();
    },[])
    const CreateMenu = ()=>{
        return <Menu
            items={items && items.map((item)=>{
                return ({
                    key:item.id,
                    label:<Link to={`/dashboard/knowledge/create/${item.id}`}>{item.label}</Link>
                })
            })}
        />
    } ;
    return (
        <Card
            title={<span className={styles.title}>我的知识列表</span>}
            className={styles.wrapper}
            size="small"
            bordered={false}
            key={"111"}
            headStyle={{ borderBottom: 0 }}
            loading={loading}
            extra={
                <Dropdown overlay={CreateMenu} placement="bottomRight">
                    <Button type="primary" icon={<PlusOutlined />}>
                        创建知识
                    </Button>
                </Dropdown>
            }
        >
            <List
                dataSource={data || []}
                loading = {loading}
                key={uniqueId()}
                renderItem={item => (
                    <List.Item>
                        <Card
                            title={<Link target="_blank" to={`/knowledge/details/${item.id}`}>{item.title}</Link>}
                            key={item.id}
                            size="small"
                            bordered
                            className={styles.item}
                            headStyle={{ borderBottomColor: '#dcdfe6' }}
                            extra={
                                <Space>
                                    <Button size="small" type="link" icon={<EyeOutlined />}>
                                        <Link target="_blank" to={`/knowledge/details/${item.id}`}>查看</Link>
                                    </Button>
                                    <Button size="small" type="link" icon={<EditOutlined />}>
                                        <Link to={`/dashboard/knowledge/edit/${item.type}/${item.id}`}>编辑</Link>
                                    </Button>
                                </Space>
                            }
                        >
                        <span>
                            {
                                item.classificationNames.map((item:any)=>{
                                    return(
                                        <Tag color="blue" key={uniqueId()}>{item.toString()}</Tag>
                                    )
                                })
                            }
                            {/*<Tag color="blue">算法模型</Tag>*/}
                            {/*<Tag color="geekblue">水环境治理</Tag>*/}
                            {/*<Tag color="green">数据处理技术</Tag>*/}
                        </span>
                            <div className={styles.description} dangerouslySetInnerHTML={{__html:item.baseInfo}}>
                            </div>
                            <div className={styles.keyword}>
                                <em>
                                    关键词：{getKeywordStr({value:item.keywords})}
                                </em>
                            </div>
                            <div className={styles.extra}>
                                <Avatar src={item.avatar}
                                        icon={
                                            <CommonIconFont
                                                // @ts-ignore
                                                type={`aircaskb-touxiang`}
                                                style={{ fontSize: 20 }}
                                            />
                                        }
                                        size="small" />
                                <a href={item.href}>{item.onwer}</a>
                                <em>最后编辑：{moment(item.updateTime).format('YYYY-MM-DD HH:mm')}</em>
                                <Space split={<Divider type="vertical" />} style={{ marginLeft: 20 }}>
                                    <Space>
                                        <StarOutlined />
                                        {item.bookmarkCount}
                                    </Space>
                                    <Space>
                                        <LikeOutlined />
                                        {item.likedCount}
                                    </Space>
                                    <Space>
                                        <MessageOutlined />
                                        {item.commentCount}
                                    </Space>
                                </Space>
                            </div>
                        </Card>
                    </List.Item>
                )}
            >

            </List>
            <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} showQuickJumper current={Number(currentPage)||1} pageSize={Number(pageSize)||5} total={Number(total)||0} onChange={onChange}
                        showTotal={(total, range)=>{
                            return '显示第 '+range[0] + " 条到第 " + range[1] + " 条记录, 共 " + total + " 条";
                        }}
                        pageSizeOptions={[5,10, 20, 50, 100]}
            />
        </Card>
    );
};
export default KnowledgeList;
